---
title: Analizar el tamaño del empaquetado
description: Aprende cómo analizar el empaquetado generado por Astro usando `rollup-plugin-visualizer`.
i18nReady: true
type: recipe
---

import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Comprender qué forma parte de un empaquetado de Astro es importante para mejorar el rendimiento del sitio. Visualizar el empaquetado puede dar pistas sobre dónde se pueden hacer cambios en tu proyecto para reducir su tamaño.

## Receta

La [biblioteca `rollup-plugin-visualizer`](https://github.com/btd/rollup-plugin-visualizer) te permite visualizar y analizar tu empaquetado de Rollup para ver qué módulos están ocupando espacio.
<Steps>
1. Instala `rollup-plugin-visualizer`:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add rollup-plugin-visualizer --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. Agrega el plugin al archivo `astro.config.mjs`:

    ```js
    // @ts-check
    import { defineConfig } from 'astro/config';
    import { visualizer } from "rollup-plugin-visualizer";

    export default defineConfig({
    vite: {
        plugins: [visualizer({
            emitFile: true,
            filename: "stats.html",
        })]
    }
    });
    ```
3. Ejecuta el comando de compilación:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm run build
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm build
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn build
        ```
        </Fragment>
    </PackageManagerTabs>

4. Encuentra el(los) archivo(s) `stats.html` de tu proyecto.

		Este archivo estará en la raíz de tu directorio `dist/` para sitios completamente estáticos y te permitirá ver qué está incluido en el empaquetado.
		
		Si tu proyecto de Astro usa renderizado bajo demanda, tendrás dos archivos `stats.html`. Uno será para el cliente y el otro para el servidor, y cada uno estará ubicado en la raíz de los directorios `dist/client` y `dist/server/`.
		
		Consulta [la documentación de Rollup Plugin Visualizer](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files) para obtener orientación sobre cómo interpretar estos archivos o configurar opciones específicas.
		
</Steps>

:::note
Dado el enfoque único de Astro para la hidratación, la compilación no representa necesariamente el empaquetado
que recibirá el cliente.

El visualizador de Rollup muestra todas las dependencias utilizadas en todo el sitio, pero no desglosa el tamaño del empaquetado por página.
:::